<template>
	<view class="events-poster">
		<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 750rpx; height: 1401rpx;"></canvas>
		<view class="save" @click="savePoster">保存到相册即可分享给朋友</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				posterImg: '',
				QRcode: '',
				name: ''
			};
		},
		onLoad(options) {
			if(options.posterImg){
				this.posterImg = decodeURIComponent(options.posterImg)
			}
			if(options.url){
				this.url = decodeURIComponent(options.url)
			}
			if(options.name){
				this.name = options.name
			}
			let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			uni.showLoading({
				title: '正在生成海报'
			});
			this.$u.api.app_create_activity_qr({
				url: this.url.slice(1),
				scene: 'scene='+userInfo.user_id
			}).then(res => {
				uni.hideLoading()
				this.QRcode = res.datas
				this.$nextTick(() => {
					this.OnCanvas()
				})
			})
		},
		methods: {
			// 添加足迹
			addFoot(where,goods_id){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: goods_id?goods_id:0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			async OnCanvas() {
				let _this = this;
				_this.ctx = uni.createCanvasContext('poster',this);
				const proImgInfo = await _this.getImageInfo({ imgSrc: _this.posterImg }); // 海报底图
				const QRcodeImgInfo = await _this.getImageInfo({ imgSrc: _this.QRcode }); // 二维码
				_this.canvasW = uni.upx2px(750);
				_this.canvasH = uni.upx2px(1401);
				
				_this.ctx.setFillStyle('#FFFFFF');
				_this.ctx.fillRect(0,0,_this.canvasW,_this.canvasH)
				
				// 绘制产品图
				_this.ctx.drawImage(proImgInfo.path, 0, 0, uni.upx2px(750), uni.upx2px(1401));
				_this.ctx.stroke();
				// 绘制二维码
				_this.ctx.beginPath()
				// _this.ctx.arc(uni.upx2px(378), uni.upx2px(1204), uni.upx2px(63), 0, 2*Math.PI);
				// _this.ctx.clip()
				_this.ctx.stroke();
				_this.ctx.drawImage(QRcodeImgInfo.path, uni.upx2px(314), uni.upx2px(1212), uni.upx2px(126), uni.upx2px(126))
				_this.ctx.save();
				_this.ctx.strokeStyle="#FFF";
				_this.ctx.restore()
				//延迟后渲染至canvas上
				setTimeout(function() {
					_this.ctx.draw();
				}, 600);
			},
			async getImageInfo({ imgSrc }) {
				uni.showLoading({
					title: '正在生成海报',
					mask: true
				})
				return new Promise((resolve, errs) => {
					if(imgSrc.indexOf('https')!=-1){
						uni.downloadFile({
							url: imgSrc,
							success:function(res){
								uni.getImageInfo({
									src: res.tempFilePath,
									success: function(image) {
										uni.hideLoading()
										resolve(image);
									},
									fail(err) {
										uni.hideLoading()
										uni.showToast({
											title: '生成失败，请退出重试',
											icon: 'none',
											duration: 1500
										})
										errs(err);
									}
								});
							}
						})
					}else{
						uni.getImageInfo({
							src: imgSrc,
							success: function(image) {
								uni.hideLoading()
								resolve(image);
							},
							fail(err) {
								uni.hideLoading()
								uni.showToast({
									title: '生成失败，请退出重试',
									icon: 'none',
									duration: 1500
								})
								errs(err);
							}
						});
					}
				});
			},
			savePoster(){
				let _this = this
				uni.showLoading({
					title: '正在保存',
					mask: true
				})
				uni.canvasToTempFilePath({
				  canvasId: 'poster',
				  success: (data) => {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: data.tempFilePath,
							success: (saveRes) => {
								uni.showToast({
									icon: 'none',
									title: '保存成功，请在相册中查看',
									duration: 1500
								})
								this.addFoot(name+'-保存海报')
							},
							fail(fail) {
								uni.hideLoading()
							}
						})
				  }
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 75rpx;
	}
	.save{
		margin: 75rpx 75rpx 0;
		border-radius: 8rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #a0252d;
		color: #FFF;
		text-align: center;
	}
</style>
